<script lang="renderjs" module="appRender">
import autofit from 'autofit.js';
import { AUTO_FIT_SELECTOR } from '@/enums/autofit.enums';

export default {
  mounted() {
    this.removeHistoryStyle();

    autofit.init({
      dh: 1920,
      dw: 1080,
      el: AUTO_FIT_SELECTOR,
      resize: true,
      ignore: ['.ignore-autofit']
    });
    this.onResize();
    document.addEventListener('resize', this.onResize);
  },
  unmounted() {
    document.removeEventListener('resize', this.onResize);
  },
  methods: {
    onResize() {
      this.$ownerInstance.callMethod('onScaleChange', autofit.scale);
    },
    // 移除历史节点防止重复创建
    removeHistoryStyle() {
      const autofitStyle = document.querySelector('#autofit-style');
      const ignoreStyle = document.querySelector('#ignoreStyle');
      if (autofitStyle) {
        autofitStyle.remove();
      }
      if (ignoreStyle) {
        ignoreStyle.remove();
      }
    }
  }
};
</script>

<!-- Ignore TS2306 -->
<script lang="ts" setup></script>

<script lang="js">
import { AUTO_FIT_SCALE } from '@/enums/autofit.enums';
import { ref, provide } from 'vue';
import { useAppStore } from '@/store/appStore';
export default{
  setup(){
    const scale = ref(1)

    const appStore = useAppStore();

    const onScaleChange=(value)=>{
      console.log('>>>onScaleChange', value);
      scale.value = value;
      appStore.setScale(value);
    }

    provide(AUTO_FIT_SCALE, scale);

    return {
      scale,
      onScaleChange
    }
  },
}
</script>

<template>
  <view class="h-screen w-screen overflow-hidden">
    <view id="auto-fit">
      <view class="h-full w-full">
        <slot />
      </view>
    </view>
  </view>
</template>
